<template>
  <div class="main">
    <div class="payment-success-container">
      <div class="img">
          <svg t="1721213144581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8723" width="80" height="80"><path d="M512 1024C229.23264 1024 0 794.76736 0 512S229.23264 0 512 0s512 229.23264 512 512-229.23264 512-512 512z m0.7168-549.49888L324.93568 286.72 276.48 335.17568 464.26112 522.9568 276.48 710.73792l48.45568 48.45568L512.7168 571.41248 700.49792 759.1936l48.45568-48.45568L561.17248 522.9568 748.9536 335.17568 700.49792 286.72 512.7168 474.50112z" fill="#d81e06" p-id="8724"></path></svg>
          <h1 class="amount red">{{ $t('Payment_cancellation') }}</h1>
          <div class="actions">
            <button @click="goHome">{{ $t('confirm') }}</button>
          </div>
      </div>
     
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();

function isWebView() {
		const userAgent = navigator.userAgent || navigator.vendor || window.opera;

		// iOS WebView检查
		if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
			if (/CriOS|FxiOS|Edg/.test(userAgent)) {
			return false; // Chrome, Firefox, Edge on iOS are standard browsers
			} else {
			return true;
			}
		}

		// Android WebView检查
		if (/Android/.test(userAgent) && /wv/.test(userAgent)) {
			return true;
		}

		// 其他特定Web视图检查
		if (/QQBrowser/.test(userAgent) || /Weibo/.test(userAgent) || /MicroMessenger/.test(userAgent)) {
			return true;
		}

		return false;
	}

const isDevice = ()=>{
    const userAgent = navigator.userAgent || window.opera;

    if(/iPhone|iPad|iPod/i.test(userAgent)){
        return 'ios'
    }else if(/Android/i.test(userAgent)){
        return 'android'
    }
}
function isFacebookBrowser() {
    const ua = navigator.userAgent;
    return /FBAN|FBAV/i.test(ua);
}
const goHome = ()=>{
  console.log('关闭标签页');


  if(isFacebookBrowser()){
    window.close();
    return
  }
  if(isWebView()){
    if(isDevice() == 'ios'){
      if(route.query.app_game_id == '312128'){
        window.location.href = 'com.ytwo.Y://';
      }else if(route.query.app_game_id == '312130'){
        window.location.href = 'com.yuytool://';
      }else{
        window.location.href = 'com.yyt.lms://'; 
      }
        return
    }else if(isDevice() == 'android'){
      if(window.innerWidth < 1025 && window.baseUrl == "http://192.168.110.244:8081/game/public"){
          window.location.href = 'http://localhost:5178';
          console.log('跳转本地移动端链接');
      }
      
      if(window.innerWidth < 1025 && window.baseUrl !== "http://192.168.110.244:8081/game/public"){
          window.location.href = '//'+window.location.hostname+'/h5/#';
          console.log('跳转测试移动端');
      }

      if(window.innerWidth > 1025 && window.baseUrl == "http://192.168.110.244:8081/game/public"){
            window.location.href = 'http://localhost:5173';
            console.log('跳转本地pc链接');
        }
        // console.log(window.location.hostname);
        if(window.innerWidth > 1025 && window.baseUrl !== "http://192.168.110.244:8081/game/public"){
          window.location.href = '//'+window.location.hostname;
          console.log('跳转测试&正式pc链接');
        }
      return
    }
  }

  // if (isPC()) {
    window.close();
  // }else{
  //   window.parent.postMessage('unShow', '*');
  // }
}

const isPC = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  // 判断是否为移动设备
  const isMobile = /iphone|ipod|android|windows phone|blackberry|bb10|mobile|opera mini/.test(userAgent);
  return !isMobile; // 如果不是移动设备，则是 PC
}
</script>

<style scoped>
@media (min-width: 1024px) {
  .payment-success-container{
    width: 500px;
    /* border-radius: 15px; */
  }
}
.main{
  background-color: #eeeeee;
  height: 100vh;
}
.red{
  color: red !important;
  margin-top: 10px;
}
.yellow{
  color: rgb(241, 176, 83) !important;
}
.payment-success-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  text-align: center;
  background-color: white;
  
}
.img{
  position: relative;
  top: 20%;
}
.success-icon {
  font-size: 80px;
  color: #52c41a;
  margin-bottom: 20px;
}

.message h1 {
  font-size: 22px;
  color: rgb(37, 182, 6);
  margin-bottom: 10px;
  margin-top: 5px;
  font-weight: 500;
}
.productName{
  font-size: 20px;
  color: #000000;
  margin-top: 50px;
}
.money {
  font-size: 32px;
  color: #000000;
  margin-top: 5px;
  font-weight: bold;
}

.order-info {
  margin-top: 50px;
  text-align: left;
  font-size: 16px;
  color: #333;
  width: 80%;
}

.order-info p {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
.order-info span,.order-info strong{
  margin: 0;
}
.actions {
  margin-top: 120px;
}

.actions button {
  display: inline-block;
  padding: 7px 70px;
  margin: 10px;
  font-size: 16px;
  color: rgb(37, 182, 6);
  border: 1px solid rgb(37, 182, 6);;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.actions button:hover {
  background-color: rgb(37, 182, 6);
  color: white;
}
</style>
